<template>
  <div id='commodity_detail'>
    <div class="container">
      <div class='commodity-title'>
        <p></p>
        <h3>商品信息</h3>
      </div>
      <div class="detail-table">
        <Row>
          <Col span="12"
               class="detail-table__col">
          分类名称：{{detail.parentCategoryName}}-{{detail.categoryName}}
          </Col>
          <Col span="12"
               class="detail-table__col">
          是否为虚拟商品：{{detail.goodsType === 1 ? '是' : '否'}}
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="detail-table__col">
          所属类型：{{(goodsKindList[0] || {}).typeName}}
          </Col>
          <Col span="12"
               class="detail-table__col">
          {{(goodsKindList[0] || {}).typeCode==='03'?'营业项分类：':'对应分类:'}}{{(goodsKindList[1] || {}).typeName}}
          </Col>
        </Row>
        <Row v-if="(goodsKindList[0] || {}).typeCode==='03'">
          <Col span="12"
               class="detail-table__col"
               v-if="(goodsKindList[1] || {}).typeCode==='0301'">
          收款项分类：{{goodsKindList.length===3?(goodsKindList[2] || {}).typeName:''}}
          </Col>
          <Col span="12"
               v-if="(goodsKindList[0] || {}).typeCode==='03'"
               class="detail-table__col">
          所属门店：{{shopName}}
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="detail-table__col">
          商品名称：{{detail.skuName}}
          </Col>
          <Col span="12"
               class="detail-table__col">
          副标题：{{detail.subTitle}}
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="detail-table__col">
          商品条码：{{ detail.barcode }}
          </Col>
          <Col span="12"
               class="detail-table__col">
          商品编码：{{detail.skuId}}
          </Col>
        </Row>
        <Row v-if="(goodsKindList[0] || {}).typeCode==='02'">
          <Col span="12"
               class="detail-table__col">
          价格：{{priceVlue}}
          </Col>
          <Col span="12"
               class="detail-table__col">
          局数：{{gamesValue}}
          </Col>
        </Row>
        <Row v-if="(goodsKindList[0] || {}).typeCode==='02'">
          <Col span="24"
               class="detail-table__col">
          销售形式：{{['支持组合','不支持组合'][gameCouponExtra.saleType]}}
          </Col>
        </Row>
        <Row>
          <Col span="24"
               class="detail-table__col">
          商品单位：{{goodsUnit}}
          </Col>
        </Row>
        <Row>
          <Col span="24"
               class="detail-table__col">
          <table>
            <tr>
              <td width="60"
                  valign="top">商品介绍：</td>
              <td style="word-break: break-all;">{{detail.goodsDesc}}</td>
            </tr>
          </table>
          </Col>
        </Row>
      </div>
    </div>
    <div class="container">
      <div class='commodity-title'>
        <p></p>
        <h3>运营信息</h3>
      </div>
      <div class="detail-table">
        <Row>
          <Col span="24"
               class="detail-table__col">
          <!-- 商品关键词：{{ detail.keywords }} -->
          <table>
            <tr>
              <td width="75"
                  style="text-align: right;"
                  valign="top">商品关键词：</td>
              <td style="word-break: break-all;">{{detail.keywords}}</td>
            </tr>
          </table>
          </Col>
        </Row>
        <Row>
          <Col span="24"
               class="detail-table__col">
          <table>
            <tr>
              <td width="75"
                  style="text-align: right;"
                  valign="top">商品备注：</td>
              <td style="word-break: break-all;">{{detail.remark}}</td>
            </tr>
          </table>
          </Col>
        </Row>
      </div>
    </div>
    <div class="container"
         v-if="(goodsKindList[1] || {}).typeCode == '0104' || (goodsKindList[1] || {}).typeCode == '0102'">
      <div class='commodity-title'>
        <p></p>
        <h3> {{ (goodsKindList[1] || {}).typeCode == '0104' ? '组合商品' : '游戏币数量' }}</h3>
      </div>
      <div v-if="(goodsKindList[1] || {}).typeCode == '0104'"
           class="detail-table">
        <Row>
          <Col span="24"
               class="detail-table__col">套餐类型：{{(goodsKindList[2] || {}).typeName}}</Col>
        </Row>
      </div>
      <Table :columns="columns"
             :data="tableData"
             style="margin-top: 15px"
             border>
        <template slot-scope="{ row }"
                  slot="goodsUnit">
          <span>{{getEnumsName(row.goodsUnit, goodsUnitList)}}</span>
        </template>
      </Table>
    </div>
    <div class="container">
      <div class='commodity-title'>
        <p></p>
        <h3>属性参数</h3>
      </div>
      <Table :columns="columnsAttr"
             :data="tableDataAttr"
             style="margin-top: 15px"
             border></Table>
    </div>
    <div class="container">
      <div class='commodity-title'>
        <p></p>
        <h3>商品相册</h3>
      </div>
      <div class="detail-table">
        <Row>
          <Col span="24"
               class="detail-table__col">
          <table>
            <tr>
              <td width="60"
                  valign="top">商品图片：</td>
              <td class="detail-table-multimedia">
                <div :class="idx===0 ? 'detail-table-multimedia-frist' : ''"
                     v-for='(item,idx) in multimedia'
                     :key='idx'>
                  <img :src="item.multUrl"
                       alt=""
                       style="width: 96px;height: 96px;margin-right:20px">
                </div>
              </td>
            </tr>
          </table>
          </Col>
        </Row>
      </div>
    </div>
    <div class="container">
      <div class='commodity-title'>
        <p></p>
        <h3>商详信息</h3>
      </div>
      <div class="detail-table">
        <Row>
          <Col span="24"
               class="detail-table__col">
          <table>
            <tr>
              <td width="75"
                  style="text-align: right;"
                  valign="top">商品详情：</td>
              <td style="word-break: break-all;"><span v-html="detail.goodsHtml"></span></td>
            </tr>
          </table>
          <!-- 商品详情：<span v-html="detail.goodsHtml"></span> -->
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getGoodsDetail, configList } from '@/api/goods/index'
import { getOrgAllTree } from '@/api/system/org'
export default {
  name: 'commodity_detail',
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId
    }),
    goodsUnit () {
      const result = this.goodsUnitList.filter(item => item.value === this.detail.goodsUnit)
      return result[0] ? result[0].label : ''
    }
  },
  data () {
    return {
      detail: {},
      tableDataAttr: [],
      gameCouponExtra: {},
      options: [],
      shopName: '',
      tableData: [],
      priceList: [], // 价格
      gamesList: [], // 局数
      priceVlue: '', // 价格值
      gamesValue: '', // 局数值
      goodsUnitList: [
        { value: 0, label: '个' },
        { value: 1, label: '枚' },
        { value: 2, label: '份' }
      ],
      columnsAttr: [
        {
          title: '参数类型',
          key: 'propName'
        },
        {
          title: '录入参数',
          key: 'propValue'
        }
      ],
      columns: [
        {
          title: '商品条码',
          key: 'barcode'
        },
        {
          title: '商品名称',
          key: 'skuName'
        },
        {
          title: '单位',
          slot: 'goodsUnit'
        },
        {
          title: '数量',
          key: 'num'
        }
      ],
      goodsKindList: [],
      multimedia: []
    }
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    getEnumsName (value, enums) {
      const result = enums.filter(item => +item.value === +value)
      return result[0] ? result[0].label : ''
    },
    getTree (shopid) {
      getOrgAllTree({
        'merchantId': this.$store.state.user.merchantId,
        'orgType': 1,
        perms: 'moms:product:productdetail',
        status: 1
      }).then(res => {
        if (res.data.status === 200) {
          this.options = [res.data.data]
          this.getShopName(this.options, shopid)
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    getShopName (data, shopid) {
      data.forEach(ele => {
        if (ele.id === shopid) {
          this.shopName = ele.orgName
        } else {
          if (ele.childList.length > 0) {
            this.getShopName(ele.childList, shopid)
          }
        }
      })
    },
    // 获取价格和局数
    getConfigList (priceId, timesId) {
      configList({
        merchantId: this.$store.state.user.merchantId,
        configType: '1',
        offset: 0,
        limit: 9999
      }).then(res => {
        if (res.data.status === 200) {
          this.priceList = res.data.data
          if (priceId) {
            let index = this.priceList.findIndex(ele => ele.id === priceId)
            this.priceVlue = this.priceList[index].configValue
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
      configList({
        merchantId: this.$store.state.user.merchantId,
        configType: '2',
        offset: 0,
        limit: 9999
      }).then(res => {
        if (res.data.status === 200) {
          this.gamesList = res.data.data
          if (timesId) {
            let index = this.gamesList.findIndex(ele => ele.id === timesId)
            this.gamesValue = this.gamesList[index].configValue
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    getDetail () {
      getGoodsDetail({
        merchantId: this.merchantId,
        skuId: this.$route.params.id
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.detail = result.data || {}
          this.gameCouponExtra = this.detail.gameCouponExtra || {}
          this.goodsKindList = this.detail.goodsKindList || []
          this.tableDataAttr = (this.detail.properties || []).map((item, index, art) => {
            // if (item.inputType === 1 || item.inputType === 2) {
            if (item.propValueId && typeof item.propValueId === 'string') {
              let propValueId = item.propValueId.split(',')
              item.propValue = item.propertyValueList.filter(ele => propValueId.includes(ele.propValueId))
                .map(ele => ele.propValue)
                .join(',')
            }
            // item.propValue = item.propertyValueList.map(ele => ele.propValue).join(',')
            // }
            return item
          })
          this.tableDataAttr = this.tableDataAttr.filter(ele => ele.propValue)
          this.multimedia = this.detail.multimedia || []
          this.tableData = this.detail.goodsCombo || []
          let shopId = this.detail.shopId
          this.getTree(shopId)
          this.getConfigList(this.gameCouponExtra.priceId, this.gameCouponExtra.timesId)
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    }
  }
}
</script>

<style lang="less">
@import '~@/assets/stylus/detail-table.less';
#commodity_detail {
  padding: 25px 100px;
  .container {
    margin-bottom: 70px;
    .commodity-title {
      display: flex;
      margin-bottom: 30px;
      p {
        width: 8px;
        height: 20px;
        margin-right: 10px;
        background-color: #2d8cf0;
      }
    }
  }
  .detail-table-multimedia {
    display: flex;
  }
  .detail-table-multimedia-frist {
    position: relative;
    &::after {
      content: '商品主图';
      display: block;
      position: absolute;
      top: 5px;
      left: 5px;
      background: #e7314e;
      height: 21px;
      padding: 2px 5px;
      // width: 48px;
      font-size: 12px;
      text-align: center;
      color: #fff;
    }
  }
}
</style>
